<meta charset="UTF-8">
<div id="onlineuser">
    <div class="full">
        <h3 class="h3-title">{{$t("bgMgr.onlineUsers")}}</h3>
        <ul>
            <li>
                <i-input v-model.trim="queryParameter"></i-input>
            </li>
            <li>
                <i-button type="primary" @click="handlerClickQuery">{{$t("reportForm.query")}}</i-button>
            </li>
        </ul>
        <div class="table-wraper">
            <i-table border :columns="columns" :height="taleHeight" :data="tableData" :loading="loading"></i-table>
        </div>
        <div class="my-page" style="margin: 5px 0;">
            <Page :total="total" :page-size="10" :current="currentIndex" @on-change="changePage"></Page>
        </div>

    </div>
    <script>
        vueInstanse = new Vue({
            el: "#onlineuser",
            i18n: utils.getI18n(),
            data: {
                queryTableData: [],
                queryParameter: "",
                loading: true,
                total: 0,
                currentIndex: 1,
                columns: [
                    {
                        title: vRoot.$t("user.username"),
                        key: 'username',
                    }, {
                        title: vRoot.$t("user.userType"),
                        width:120,
                        key: 'userTypeStr'
                    }, {
                        title: vRoot.$t("header.loginSource"),    
                        width:120,
                        key: 'from'
                    }, {
                        title: vRoot.$t("header.loginTime"),
                        key: 'logintimeStr'
                    }, {
                        title: 'ip',
                        key: 'loginip'
                    }, {
                        title: vRoot.$t("header.multiSiteLanding"),  
                        width:120,
                        key: 'multiloginStr'
                    }, 
                ],
                tableData: [],
                recordsList: [],
                taleHeight: 300,

            },
            methods: {
                handlerClickQuery() {
                    var self = this;
                    var queryTableData = [];
                    var queryParameterLowerCase = this.queryParameter.toLowerCase();
                    if (self.queryParameter == ''){
                        this.queryOnlineUsers();
                    }else{
                        this.recordsList.forEach(function(record) {
                        var username = record.username;
                        if (
                            record.username.indexOf(self.queryParameter) != -1 
                        ) {
                            queryTableData.push(record);
                        }
                        })

                        this.currentIndex = 1;
                        this.queryTableData = queryTableData;
                        this.tableData = this.queryTableData.slice(0, 10);
                        this.total = this.queryTableData.length;
                    }
       
                },

                getUserTypeStr: function(type) {
                    var name = "";
                    for (var i = 0; i < this.userTypeDescrList.length; i++) {
                        var item = this.userTypeDescrList[i];
                        if (item.type == type) {
                            name = item.name;
                            break;
                        }
                    };
                    return name;
                },
                

                calcTableHeight: function() {
                    var wHeight = window.innerHeight;
                    this.taleHeight = wHeight - 185;
                },
                queryOnlineUsers:function(){
                    var me = this;
                    var url = myUrls.onlineUsers();
                    utils.sendAjax(url,{},function(resp){
                        me.loading = false;
                        if(resp.status == 0){
                            var users = resp.users;
                            if(users){
                                users.sort(function(a,b){return b.logintime-a.logintime});
                                users.forEach(function(item){
                                    item.userTypeStr = me.getUserTypeStr(item.usertype);
                                    item.multiloginStr = item.multilogin == 1 ? vRoot.$t('header.yes'):vRoot.$t('header.no');
                                    item.logintimeStr = DateFormat.longToDateTimeStr(item.logintime,8);
                                });
                                me.tableData = users;
                                me.recordsList = users;
                                me.total = users.length;
                                me.currentIndex = 1;
                            }
                        }
                    });
                }
            },
            mixins: [mixIn],
            mounted: function() {
                var me = this;
                this.userTypeDescrList = vstore.state.userTypeDescrList;
                this.queryOnlineUsers();
                this.calcTableHeight();
                window.onresize = function() {
                    me.calcTableHeight();
                }
            }
        })
    </script>
</div>